<template>
  <div class="wrappr">
    <swiper :options="swiperOption">
        <swiper-slide v-for = 'item of swiperList' :key="item.id">
            <img class="swiper-img" :src="item.imageUrl"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'honeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [
        {
          id: '0001',
          imageUrl: 'https://imgs.qunarzz.com/piao/fusion/1510/a9/9ab526588c4282.jpg_890x330_f0c3609b.jpg'
        }, {
          id: '0002',
          imageUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/0339950a1244ee076130b5b88e1420e6.jpg_890x330_9babf15f.jpg'
        }, {
          id: '0003',
          imageUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/b67b8e466eb2625f6d3141c1a7510c94.jpg_890x330_0aa64222.jpg'
        }, {
          id: '0004',
          imageUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/b446a1b66cee888a857e0b421d0e4ed6.jpg_890x330_497cdb77.jpg'
        }, {
          id: '0005',
          imageUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/11c700d6f0ec7dca49a32980d4a80107.jpg_890x330_c42b2d03.jpg'
        }
      ]
    }
  }
}
</script>

<style lang='stylus' scoped>
  .wrappr >>> .swiper-pagination-bullet-active
      background: #fff
  .wrappr
    width: 100%
    height: 0
    overflow: hidde
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
      width: 100%
</style>
